﻿<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图层叠加分析</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="mapboxgl,transform" src="./static/libs/include-mapboxgl-local.js"></script>
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <style>
        .mapboxgl-ctrl-icon {
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: 60%;
        }

        .mapboxgl-ctrl-icon.mapboxgl-ctrl-add {
            background-image: url('data:image/svg+xml;utf8,<svg t="1594093104250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4905"><path d="M789.994 771.154L459.266 670.616l295.152-343.032-380.88 318.478L64.28 553.82l896.008-427.218-170.294 644.552z m-341.168 127.42v-177.38l108.868 30.812-108.868 146.568z" p-id="4906"></path></svg>');
        }

        .mapboxgl-ctrl-icon.mapboxgl-ctrl-update {
            background-image: url('data:image/svg+xml;utf8,<svg t="1594090532673" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1150"><path d="M512 269.922592l0 121.038704 161.384597-161.384597L512 68.191078l0 121.038704c-178.330548 0-322.770218 144.43967-322.770218 322.770218 0 63.343677 18.559705 122.047684 50.02944 171.874509l58.905598-58.905598c-17.953907-33.689287-28.242228-72.018244-28.242228-112.969934C269.922592 378.251833 378.251833 269.922592 512 269.922592zM784.740778 340.124468l-58.905598 58.905598c17.953907 33.689287 28.242228 72.018244 28.242228 112.969934 0 133.748167-108.329241 242.077408-242.077408 242.077408L512 633.038704 350.614379 794.423301l161.384597 161.384597L511.998977 834.770218c178.330548 0 322.770218-144.43967 322.770218-322.770218C834.770218 448.656323 816.210513 389.952316 784.740778 340.124468z" p-id="1151"></path></svg>');
        }
    </style>
    <script type="text/javascript">
        //整个js文件都是严格模式下执行的
        "use strict";
        // 定义地图容器全局变量
        var map;
        // 定义矢量图层全局变量
        var vectorLayer, resultLayer;
        //缓存结果图层的基地址
        var resultBaseUrl = "gdbp://MapGisLocal/ClientTheme/ds/SpatialAnalysis/sfcls/";
        // 定义矢量图层guid
        var guid;
        var { protocol, ip, port } = window.webclient;

        /** 地图初始化函数
         */
        function init() {
            //随机生成一个guid
            guid = Math.floor(Math.random() * 10000000).toString();
            // 创建地图容器
            map = new mapboxgl.Map({
                // 地图显示的div容器
                container: 'map',
                minZoom: 3,
                zoom: 6,
                center: [112.247175, 30.152892]
            });
            var navigationControl = new mapboxgl.NavigationControl();
            map.addControl(navigationControl, 'top-left');
            // 创建矢量图层
            vectorLayer = new mapboxgl.Zondy.Map.MapVectorLayer(["gdbp://MapGisLocal/ClientTheme/ds/epsg3857/sfcls/湖北省行政区1_1", "gdbp://MapGisLocal/ClientTheme/ds/epsg3857/sfcls/湖北省湖泊1_1"], {
                // IGServer所在ip地址
                ip: `${ip}`,
                // IGServer请求端口号
                port: `${port}`,
                //添加guid
                guid: guid
            });
            // 将矢量图层添加到地图
            vectorLayer.addToMap(map);

            var html = '<div class="mapboxgl-ctrl mapboxgl-ctrl-group">' +
                '<button class="mapboxgl-ctrl-icon mapboxgl-ctrl-add" type="button" title="图层叠加分析" onclick="OverlayByLayerAnalysis()" aria-label="add"></button>' +
                '<button class="mapboxgl-ctrl-icon mapboxgl-ctrl-update" type="button" title="重置" onclick="reset()" aria-label="update"></button>' +
                '</div>';
            $(".mapboxgl-ctrl-top-right").append(html);
            //注册鼠标移动事件
            map.on('mousemove', function (e) {
                //经纬度坐标转web墨卡托
                const earthRad = 6378137.0;
                const x = e.lngLat.lng * Math.PI / 180 * earthRad;
                const a = e.lngLat.lat * Math.PI / 180;
                const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
                document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
            });
        }

        /** 执行图层叠加分析
         */
        function OverlayByLayerAnalysis() {
            reset();
            //停止进度条
            stopPressBar();
            //显示进度条
            startPressBar();
            //结果图层的名称
            var resultname = resultBaseUrl + "overLayByLayerAnalysisResultLayer" + getCurentTime();
            //实例化OverlayByLayer类
            var overlayParam = new Zondy.Service.OverlayByLayer({
                //IGServer所在ip地址
                ip: `${ip}`,
                //IGServer请求端口号
                port: `${port}`,
                //设置被叠加图层URL
                srcInfo1: "gdbp://MapGisLocal/ClientTheme/ds/epsg3857/sfcls/湖北省行政区1_1",
                //设置叠加图层URL
                srcInfo2: "gdbp://MapGisLocal/ClientTheme/ds/epsg3857/sfcls/湖北省湖泊1_1",
                //设置结果URL
                desInfo: resultname,
                //设置结果图层的图形参数信息
                infoOptType: 2,
                //求交
                overType: 1,
                //允许重算面积
                isReCalculate: true,
                //容差半径
                radius: 0.05
            });
            //调用基类的execute方法，执行叠加分析， onSuccess为结果回调函数
            overlayParam.execute(AnalysisSuccess, "post", false, "json", AnalysisError);
        }

        /** 分析失败回调
         */
        function AnalysisError(e) {
            //停止进度条
            stopPressBar();
        }

        /** 分析成功后的回调
         *  @param {object} data 获取结果对象
         */
        function AnalysisSuccess(data) {
            //停止进度条
            stopPressBar();
            if (!data.succeed) {
                alert("图层叠加分析，请检查参数！");
            } else {
                if (data.results.length !== 0) {
                    //结果图层的名称
                    var resultLayerUrl = data.results[0].Value;
                    //将结果图层添加到地图视图中显示
                    resultLayer = new mapboxgl.Zondy.Map.MapVectorLayer(encodeURIComponent(resultBaseUrl + resultLayerUrl), {
                        //IGServer所在ip地址
                        ip: `${ip}`,
                        //IGServer请求端口号
                        port: `${port}`,
                        //图层guid
                        guid: (new Date()).getTime().toString()
                    });
                    if (map.getLayer(vectorLayer.layerID)) {
                        map.removeLayer(vectorLayer.layerID);
                    }
                    resultLayer.addToMap(map);
                }
            }
        }

        /** 重置地图显示
         */
        function reset() {
            if (!map.getLayer(vectorLayer.layerID)) {
                vectorLayer.addToMap(map);
            }
            if (resultLayer && map.getLayer(resultLayer.layerID)) {
                map.removeLayer(resultLayer.layerID);
            }
        }

        /** 当前日期加时间(如:2009-06-12-120000)
         */
        function getCurentTime() {
            var now = new Date();
            //获取当前年份
            var year = now.getFullYear();
            //获取当前月份
            var month = now.getMonth() + 1;
            //获取当前日期
            var day = now.getDate();
            //获取当前时刻
            var hh = now.getHours();
            //获取当前分钟
            var mm = now.getMinutes();
            //获取当前秒钟
            var ss = now.getSeconds();
            //将当前的日期拼串
            var clock = year + "-";
            if (month < 10)
                clock += "0";
            clock += month + "-";
            if (day < 10)
                clock += "0";
            clock += day + "-";
            if (hh < 10)
                clock += "0";
            clock += hh;
            if (mm < 10) clock += '0';
            clock += mm;
            if (ss < 10) clock += '0';
            clock += ss;
            return (clock);
        }

        /** 停止进度条
         */
        function stopPressBar() {
            document.getElementById('preview').style.display = "none";
        }

        /** 开始进度条动画
         */
        function startPressBar() {
            document.getElementById('preview').style.display = "";
        }
    </script>
</head>

<body onload="init()">
    <div id="preview"
        style="display: none; text-align: center; padding-top: 250px; font-weight: bold;position: absolute;background: rgba(3, 3, 3, 0.1);color: #fff;float: left; width: 100%;height: 100%;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;z-index: 20000;">
        <img src="./static/assets/graphic-image/39-1.gif" alt='' /><br />
        <br />
        <span>正在执行叠加分析，请稍候</span>
    </div>
    <div id="map" style="width: 100%;  height: 700px;">
        <div id="mouse-position">
        </div>
    </div>
</body>

</html>